<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="zh-CN">
	<title>退出登录 - 智能选课系统</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, sans-serif;
		}

		body {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
		}

		.logout-container {
			background: white;
			border-radius: 16px;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
			padding: 40px;
			text-align: center;
			max-width: 450px;
			width: 100%;
			animation: fadeInUp 0.6s ease;
		}

		.logout-icon {
			width: 80px;
			height: 80px;
			background: linear-gradient(135deg, #ff6b6b, #ee5a52);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 20px;
		}

		.logout-icon svg {
			width: 40px;
			height: 40px;
			fill: white;
		}

		.logout-title {
			color: #2c3e50;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 15px;
		}

		.logout-message {
			color: #7f8c8d;
			font-size: 16px;
			line-height: 1.6;
			margin-bottom: 25px;
		}

		.loading-spinner {
			width: 40px;
			height: 40px;
			border: 3px solid #f3f3f3;
			border-top: 3px solid #3498db;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto;
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(30px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	</style>
	<script type="text/javascript">
		// 在被嵌套时就刷新上级窗口
		if (window.parent != window) {
			window.parent.location.reload(true);
		}

		// 添加一些视觉效果
		document.addEventListener('DOMContentLoaded', function() {
			setTimeout(function() {
				document.body.style.opacity = '1';
			}, 100);
		});
	</script>
</head>
<body>
<div class="logout-container">
	<div class="logout-icon">
		<svg viewBox="0 0 24 24">
			<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/>
		</svg>
	</div>
	<h1 class="logout-title">正在退出登录</h1>
	<p class="logout-message">您正在安全退出系统，请稍候...</p>
	<div class="loading-spinner"></div>
</div>
<div class="back-btn">
	<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
</div>
</body>
</html>